.dark-theme {
    $not-so-dark-gray: lighten($dark-gray, 10%);
    --backgroundColor: #{$not-so-dark-gray};

    --textColor: #dddddd;
    --textCodeColor: #cccccc;
    --disabledTextColor: #{darken(#dddddd, 25%)};

    --linkColor: #e9ffaa;
    --linkHoverColor: #de7d40;
    --linkDisabledColor: #444444;
    --linkActiveColor: #de7d40;

    --h1Color: #{$white};
    --h2Color: #{$white};
    --h3Color: #{$light-gray};
    --h4Color: #{$light-gray};
    --h5Color: #{$light-gray};
    --h6Color: #{$light-gray};
    --h2UnderlineColor: var(--mainBrandColor);

    --buttonActiveColor: #e07484;
    --dividerBarColor: rgba(255, 255, 255, .1);
    --glossaryHeaderColor: #{$medium-gray};
    --deprecatedBackgroundColor: silver;
    --boxBorderColor: var(--textColor);

    --quoteCalloutBackgroundColor: #{$dark-gray};
    --quoteCalloutBorderColor: #{$dark-gray};
    --tipCalloutBackgroundColor: #{$dark-gray};
    --tipCalloutBorderColor: #{$dark-gray};
    --ideaCalloutBackgroundColor: #{$dark-gray};
    --ideaCalloutBorderColor: #{$dark-gray};
    --warningCalloutBackgroundColor: #{$dark-gray};
    --warningCalloutBorderColor: #{$dark-gray};

    --preBlockShadowColor: #777777;
    --preBlockBorderColor: #777777;
    --preBlockBackgroundColor: #2d2d2d;
    --preBlockCommandOutputTextColor: var(--textColor);
    --preBlockCommandOutputBackgroundColor: #{$dark-gray};

    --dropdownBorderColor: #{$white};
    --dropdownCheck: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
    --dropdownCheckHover: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='white' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");

    --tabsetBorderColor: #777777;
    --tabsetShadowColor: #777777;
    --tabsetUnselectedTabBackgroundColor: #{$dark-gray};
    --tabsetSelectedTabBackgroundColor: #{$not-so-dark-gray};

    --sidebarRightChevron: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407.436 407.436'%3E%3Cpath fill='white' d='M112.814 0L91.566 21.178l181.946 182.54-181.946 182.54 21.248 21.178 203.055-203.718z'/%3E%3C/svg%3E");
    --sidebarRightChevronHover: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407.436 407.436'%3E%3Cpath fill='orange' d='M112.814 0L91.566 21.178l181.946 182.54-181.946 182.54 21.248 21.178 203.055-203.718z'/%3E%3C/svg%3E");
    --sidebarDownChevron: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407.437 407.437'%3E%3Cpath fill='white' d='M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z'/%3E%3C/svg%3E");
    --sidebarDownChevronHover: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 407.437 407.437'%3E%3Cpath fill='orange' d='M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z'/%3E%3C/svg%3E");

    --popoverBorderColor: #777777;
    --popoverShadowColor: #777777;
    --popoverHeaderBackgroundColor: #{$dark-gray};
    --popoverHeaderTextColor: var(--textColor);
    --popoverBackgroundColor: var(--backgroundColor);
    --popoverTextColor: var(--textColor);

    --headerLightShadowColor: rgba(0, 0, 0, .14);
    --headerDarkShadowColor: rgba(0, 0, 0, .28);

    --figureBackgroundColor: #a3a3a3;
    --figureCaptionColor: #{$white};

    --heroLogoColor: var(--textColor);
    --landingPanelBackgroundColor: #{$dark-gray};
    --landingPanelBorderColor: #777777;
    --landingPanelTextColor: var(--textColor);
    --landingPanelShadowColor: #777777;
    --landingPanelShadowHoverColor: #999999;

    --floatingButtonColor: rgba(0, 0, 0, .4);
    --floatingButtonHoverColor: var(--textBrandHighlightColor);

    --companyLogoBackgroundColor: lightgrey;
    --companyLogoTaglineColor: #{$black};

    --textWeight: 300;
    --linkWeight: 300;
    --h1Weight: 400;
    --h2Weight: 400;
    --h3Weight: 500;
    --h4Weight: 500;
    --h5Weight: 500;
    --h6Weight: 500;
    --tableHeaderWeight: 400;
    --boldTextWeight: 600;
    --heroLeadWeight: 300;
    --blogAttributeWeight: 500;
    --sectionIndexLinkWeight: 400;
    --buttonWeight: 400;
    --tocLinkWeight: 300;
    --sidebarLinkWeight: 300;
    --sidebarCurrentPageWeight: 500;
    --glossaryHeaderWeight: 300;
    --glossaryWordWeight: 500;
    --figureCaptionWeight: 400;
    --textCodeWeight: 300;
    --faqQuestionWeight: 400;
}
